<template>
    <div class="many-list-page">
        <div class="many-list-header">
            <div class="many-list-header-title">资源管理</div>
            <div class="many-list-btn">
                <el-button type="" @click="handleBatchDelete()"><el-icon>
                        <Delete />
                    </el-icon> 删除</el-button>
                <el-button type="primary" @click="handleAdd()"><el-icon>
                        <Plus />
                    </el-icon> 添加</el-button>
            </div>
        </div>

        <div class="many-search-box">
            <el-form :inline="true" :model="searchForm" class="demo-form-inline" ref="searchFormRef">
                <div>
                    <el-form-item label="" prop="status">
                        <el-select v-model="searchForm.status" placeholder="状态" style="width: 130px" clearable>
                            <template #label="{ label }">
                                <span>状态: </span>
                                <span style="font-weight: bold">{{ label }}</span>
                            </template>
                            <el-option v-for="item in statusList" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </div>
                <div>
                    <el-button @click="resetForm(searchFormRef)" text>重置</el-button>
                    <el-button @click="onQuery" text>查询</el-button>
                </div>
            </el-form>
        </div>

        <div class="many-table-area">
            <el-table :data="tableData" stripe header-row-class-name="many-table-header"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="index" width="55" label="序号"></el-table-column>
                <el-table-column prop="id" label="用户编码"></el-table-column>
                <el-table-column prop="username" label="姓名"></el-table-column>
                <el-table-column prop="birthday" label="出生年月"></el-table-column>
                <el-table-column prop="sexDesc" label="性别"></el-table-column>
                <el-table-column prop="statusDesc" label="状态">
                    <template #default="scope">
                        <el-tag :type="getStatusTag(scope.row.status)" disable-transitions round>
                            {{ scope.row.statusDesc }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="creator" label="创建人"></el-table-column>
                <el-table-column prop="modifier" label="修改人"></el-table-column>
                <el-table-column prop="created" label="创建时间" width="180"></el-table-column>
                <el-table-column prop="modified" label="修改时间" width="180"></el-table-column>
                <el-table-column fixed="right" label="操作" width="260">
                    <template #default="scope">
                        <el-button size="small" color="#626aef" @click="handleEdit(scope.$index, scope.row)">
                            授权
                        </el-button>
                        <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">
                            编辑
                        </el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="many-page-area">
            <el-pagination v-model:current-page="Page.currentPage" v-model:page-size="Page.pageSize"
                :page-sizes="Page.pageSizes" :size="Page.size" :disabled="false" :background="false"
                layout="prev, pager, next,  jumper, sizes, total" :total="Page.total">
            </el-pagination>
        </div>
    </div>
</template>
<script lang="ts" setup>

import { ref, reactive, onMounted } from "vue";
import { FormInstance } from "element-plus";

const searchFormRef = ref<FormInstance>();
const multipleSelection = ref<User[]>([])

const searchForm = reactive({
    status: '',
})

const statusList = [
    { label: '', value: '' },
    { label: '正常', value: '0' },
    { label: '冻结', value: '1' },
    { label: '未验证', value: '2' },
]

const Page = reactive({
    currentPage: 1,
    pageSize: 10,
    size: 'default',
    total: 0,
    pageSizes: [10, 20, 50, 100]
});

interface User {
    id: number,
    username: string,
    birthday: string,
    sex: string,
    sexDesc: string,
    status: string,
    statusDesc: string,
    creator: string,
    modifier: string,
    created: string,
    modified: string
}

const tableData = ref<User[]>([])

const handleBatchDelete = () => {

}

const handleAdd = () => {

}


const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) {
        return;
    }

    formEl.resetFields();
}

const onQuery = () => {

}

const getStatusTag = (status: number) => {
    if (status === 0) {
        return 'success'
    } else if (status === 1) {
        return 'danger'
    } else {
        return 'info'
    }
}

const handleEdit = (index: number, row: any) => {

}

const handleDelete = (index: number, row: any) => {

}

const handleSelectionChange = (val: User[]) => {
    console.log(val);
    multipleSelection.value = val;
}
</script>